<template>
  <div style="width: 100%; height: 100%" class="flex flex-column">
    <div v-auth="'actualPopulation:detail:tab:serviceInfo:add'" class="flex-fixed" style="margin-bottom: 10px">
      <a-button type="primary" @click="addTag">新增</a-button>
    </div>
    <div class="flex-fixed" style="margin-bottom: 10px">
      <a-space v-if="tags && tags.length">
        <a-tag v-for="item of tags" :key="item.special_id" color="orange" closable @close.prevent="delTag(item)">{{
          item.value
        }}</a-tag>
      </a-space>
      <a-tag v-else class="flex-fixed">此人目前尚未添加特殊信息</a-tag>
    </div>
    <common-table
      ref="AntdTable"
      :show-toolbar="false"
      @vue:mounted="() => $refs.AntdTable.load()"
      :fetch="getDataAsync"
      :fetch-params="apiParams"
      :columns="columns"
      class="flex-auto-height"
    />
  </div>
</template>

<script>
import { handleCommonRes, handleFormRes, handleTableRes } from '@gis/lib/utils/resolver.js';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import { peopleSpecialSigns, peopleBusinessCancelTag, peopleBusinessList } from '@gis/lib/api';
import { openBusinessInfoAddTagDialog } from '@gis/modules/views/reality-people/people-details/peopleDetailsDialog.js';
import { Modal } from 'ant-design-vue';
export default {
  name: 'business-info',
  components: { CommonTable },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      tags: [],
      columns: [
        {
          title: '重点类型',
          dataIndex: 'dic_people_type',
          width: 100,
        },
        {
          title: '操作',
          dataIndex: 'is_logout',
          customRender: (v) => (v ? '新增' : '移除'),
          width: 80,
        },
        {
          title: '操作人',
          dataIndex: 'creator_name',
        },
        {
          title: '操作时间',
          dataIndex: 'gmt_create',
        },
        {
          title: '操作说明',
          dataIndex: 'reason',
          width: 110,
        },
        {
          title: '短信通知人',
          dataIndex: 'zzPeopleNames',
          width: 120,
        },
      ],
    };
  },
  computed: {
    apiParams() {
      return { people_id: this.data.people_id };
    },
  },
  created() {
    this.getTagDataAsync();
  },
  methods: {
    refresh() {
      this.getTagDataAsync();
      this.$refs.AntdTable.reload();
      this.$emit('updateDetails'); //更新人员详情 -- 更新tag列表and更新table列表
    },
    addTag() {
      openBusinessInfoAddTagDialog(this.data.people_id).then((res) => {
        if (res) {
          this.refresh();
        }
      });
    },
    async delTag(item) {
      Modal.confirm({
        title: '提示',
        content: '确认取消该标签？',
        onOk: async () => {
          await handleFormRes(
            peopleBusinessCancelTag,
            { special_id: item.special_id },
            {
              onOk: () => this.refresh(),
            }
          );
        },
      });
    },
    async getTagDataAsync() {
      if (!this.apiParams || !this.apiParams.people_id) return;
      const data = await handleCommonRes(peopleSpecialSigns(this.apiParams));
      this.tags = data;
    },
    async getDataAsync(params) {
      if (!params || !params.people_id) return;
      return await handleTableRes(peopleBusinessList(params));
    },
  },
};
</script>

<style scoped lang="less"></style>
